import BaseChart from "@/components/Chart/BaseChart.vue";
export default defineComponent({
	props: {
		dashboardData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props, { expose }) {
		const trendChartOpts = reactive({
			animation: false,
			color: ["#10CCCF", "#A3CF10", "#10CF76", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#0C9EFF"],
			tooltip: {
				trigger: "item",
				position: "right"
			},
			legend: { show: false },
			title: [
				{
					text: 0 + "个",
					left: "46%",
					top: "39%",
					textAlign: "center",
					textStyle: {
						fontSize: "35",
						fontWeight: "700",
						color: "#ddd",
						textAlign: "center",
						textBorderColor: "rgba(0, 0, 0, 0)",
						textShadowColor: "#fff",
						textShadowBlur: "0",
						textShadowOffsetX: 0,
						textShadowOffsetY: 1
					}
				},
				{
					text: "总传感器",
					left: "46%",
					top: "56%",
					textAlign: "center",
					textStyle: {
						fontSize: "14",
						color: "#97adbb",
						textAlign: "center",
						textBorderColor: "rgba(0, 0, 0, 0)",
						textShadowColor: "#fff",
						textShadowBlur: "0",
						textShadowOffsetX: 0,
						textShadowOffsetY: 1
					}
				}
			],
			series: [
				{
					name: "传感器类型",
					type: "pie",
					radius: ["60%", "80%"],
					itemStyle: {
						borderColor: "#041b2c",
						borderWidth: 4
					},
					label: {
						show: false,
						position: "center"
					},
					data: [] as any[]
				}
			]
		});
		const trendChart = ref();
		const loadData = async (deviceStatRes: any) => {
			let list = deviceStatRes?.result || [];
			let seriesData: any = {};
			let allTotal = 0;
			list.forEach((item: any) => {
				let total = item.online + item.offline;
				let type = total > 0 ? item.productName : "其他";
				if (!seriesData[type]) {
					seriesData[type] = {
						value: 0,
						name: type,
						color: trendChartOpts.color[Object.keys(seriesData).length % trendChartOpts.color.length]
					};
				}
				seriesData[type].value += total;
				allTotal += total;
			});
			trendChartOpts.title[0].text = allTotal + "";
			trendChartOpts.series[0].data = Object.values(seriesData);
			trendChart.value.setChart(trendChartOpts);
		};
		expose({ loadData });
		return () => {
			return (
				<>
					<div class="block-title">设备类型统计</div>
					<div class="device-type-chart flex justify-between items-center" style="height:calc(100% - 45px)">
						<div class="chart-left flex-1 justify-center h-full items-center relative">
							<div class="chart-p h-full">
								<BaseChart ref={trendChart} width="100%" />
							</div>
						</div>
						<div class="w-1/2 chart-right" style="max-height: 90%;overflow: auto;">
							{trendChartOpts.series[0].data.map((item: any) => {
								return (
									<div class="item">
										<div class="item-label flex">
											<div class="legend" style={{ background: item.color }}></div>
											<div>{item.name}</div>
										</div>
										<div class="item-value">{item.value}</div>
									</div>
								);
							})}
						</div>
					</div>
				</>
			);
		};
	}
});
